<template>
	<view 
		:style="[{'padding-top':`${(customBarH*2)+140}rpx`}]"
		:id="templateId" 
		class="container" 
		@click="tv=true">
		<template v-if="loaded">
			<!-- 未登录时的右上角提示 -->
			<top-right-notice
				v-if="!userInfo.customerId"
				:pos="`top:${customBarH*2}rpx;right:40rpx;`"
			></top-right-notice>
			<!-- 自定义导航??? -->
			<custom-header>
				<!-- 标题 -->
				<template slot="title">
					<view class="fs-bold clamp">{{shopInfo.shopName}}</view>
				</template>
				<!-- 图标 -->
				<template slot="iconArea">
					<view class="zz-pos_abs ch-icon-area zz-flex">
						<view 
							class="ch-icon"
							@click="navTo('/pages/shop/pages/shopInfo')">
							<image class="zz-img-fit" :src="baseCommonFileUri+'image/store-flag.png'"></image>
						</view>
						<view 
							class="zz-ml12 ch-icon"
							@click="navTo('/pages/shop/pages/companyInfo')">
							<image class="zz-img-fit" :src="baseCommonFileUri+'image/company-flag.png'"></image>
						</view>
					</view>
				</template>
			</custom-header>
			<!-- 第一套首页面模板 begin -->
			<!-- 小程序头部兼容 -->
			<!-- 主题色 -->
			<!-- <view
				class="df mp-search-wrap"
				:style="{ 'background-color': themeStyles.mainColor }"
				>
				<view @click="searchGoods()" class="df mp-search-box">
					<text class="fyicon icon-search search-icon"></text>
					<input
						disabled
						class="ser-input"
						type="text"
						value=""
						placeholder="搜索商品"
					/>
				</view>
			</view> -->
			<!-- 显示位置和付款码 -->
			<view 
				:style="[{'top':`${customBarH*2}rpx`},{'height':`${scrollInfoStyle}`}]"
				class="zz-flex zz-jc-sb mp-search-wrap">
				<view class="zz-flex-fb70 welcome-pos">
					<view 
						class="zz-flex-fb100_auto clamp fs34 fs-bold lh52 color000 zz-mb12">欢迎光临！{{userInfo.nickname||'游客'}}</view>
					<!-- 门店位置信息 -->
					<view 
						class="zz-flex zz-ai-c">
						<text 
						:style="themeStyles.textMainColor"
						class="fs template__icon template__icon-address"></text>
						<view 
							:class="[distanceInfo.dis?'zz-flex-fb60_auto':'zz-flex-fb90_auto']"
							class="clamp fs24 lh34 color000 zz-mb_0_16">{{ZZremove_PCD_str(shopDetailInfo.address)||'暂无门店地址信息'}}</view>
						<view 
							v-if="distanceInfo.dis"
							@tap="ZZopenLocation(shopDetailInfo.latitude,shopDetailInfo.longitude)"
							class="zz-flex-fb40_auto zz-flex clamp fs22 lh32 color999">
							{{`距您 ${distanceInfo.dis}km `}}
							<text 
								:style="themeStyles.textMainColor"
								class="zz-pos_rel zz-t1 fs template__icon template__icon-right"></text>
						</view>
					</view>
				</view>
				<view 
					class="pay-qrcode zz-flex zz-jc-sb zz-ai-c"
					@click="openBalanceQrcode">
					<text 
						:style="themeStyles.textMainColor"
						class="fs28 template__icon template_icon-qrcode"></text>
					<view class="fs24 lh34 color333">付款码</view>
				</view>
			</view>
			<!--  -->
			<view id="content-wrap" 
				:style="scrollContentStyle">
				<!-- 头部轮播 -->
				<view class="swiper-wrap">
					<view class="carousel-section">
						<!-- 标题栏和状态栏占位符 -->
						<!-- <view class="titleNview-placing"></view> -->
						<!-- 背景色区域 -->
						<!-- <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
						<swiper
							autoplay
							class="carousel"
							indicator-dots
							indicator-active-color="#fff"
							circular
							@change="swiperChange"
							>
							<view
								v-for="(item, index) in carouselList"
								:key="index"
							>
								<swiper-item
									v-if="item.imagePath"
									class="carousel-item"
								>
									<image
										mode="widthFix"
										@click="carouselRoute(item)"
										:src="baseFileUri + item.imagePath"
									/>
								</swiper-item>
							</view>
						</swiper>
					</view>
				</view>
				
				<!-- 第一套首页面模板 begin -->

				<template v-if="templateId === 'template1101'">
					<!-- 分类 -->
					<view v-if="!!activity.length" class="cate-section">
						<view class="theme__panel df df-w cate-section__list">
							<view
								v-for="(item, index) in activity"
								:key="index"
								@click="navTo(item.pagePath)"
								class="cate-item"
							>
								<image
									:src="baseTemplateFileUri + item.imagePath"
								></image>
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>

					<!-- 直播跳转 -->
					<view
						v-if="liveListData.length"
						class="live-wrap">
						<view class="live-wrap__title zz-mb32">
							<trick-title
								title="直播广场"
								iconName="live1"
								fontWeight="500"
								justifyContent="flex-start"
								:showLine="false"
								:showRightArrow="true"
								:color="themeStyles.mainColor"
								:iconColor="themeStyles.lightMainColor"
							>
							</trick-title>
						</view>
						<view 
							class="live-list">
							<uni-live-col 
								pathResource="0"
								:itemInfo="liveListData[0]"></uni-live-col>
						</view>
					</view>

					<!-- 热卖商品 begin -->
					<view v-if="hotGoodsList.length" class="goods-wrap">
						<view class="goods-wrap__title">
							<trick-title
								title="热卖爆款"
								iconName="hot"
								fontWeight="500"
								justifyContent="flex-start"
								:showLine="false"
								:color="themeStyles.mainColor"
								:iconColor="themeStyles.lightMainColor"
							>
							</trick-title>
						</view>
						<view class="goods-list">
							<uni-goods-list-row :goodsList="hotGoodsList">
							</uni-goods-list-row>
						</view>
					</view>
					<!-- 热卖商品 end -->

					<!-- 精选推荐 begin -->
					<view class="goods-wrap">
						<view class="goods-wrap__title">
							<trick-title
								title="精选推荐"
								iconName="love"
								fontWeight="500"
								justifyContent="flex-start"
								:showLine="false"
								:color="themeStyles.mainColor"
								:iconColor="themeStyles.lightMainColor"
							>
							</trick-title>
						</view>
						<view class="goods-list">
							<uni-goods-list :goodsList="goodsList">
							</uni-goods-list>
						</view>
					</view>

					<!-- 店品展示 begin -->
					<view class="store-pro-wrap">
						<view class="store-pro-title zz-mb32">
							<trick-title
								title="店品展示"
								iconName="store-pro-show"
								fontWeight="500"
								justifyContent="flex-start"
								:showLine="false"
								:color="themeStyles.mainColor"
								:iconColor="themeStyles.lightMainColor"
							>
							</trick-title>
						</view>
						<view class="store-pro-list">
							<view class="store-pro-list_item"
								v-for="(item,index) in hotGoodsList"
								:key="index">
								<uni-goods-row
									:justShow="true"
									width="100%"
									goodsImageHeight="220rpx"
									:justShowFlag="true"
									:goods="item"
									:routeLink="
										`/pages/common/pages/goods/goodsDetail?justShow=1&goodsId=${item.goodsId}`
									"
									:goodsPrice="item.priceStr.split('.')"
									:priceColor="themeStyles.mainColor"
									:latePrice="item.activity !== 0 && item.priceOut">
										

									</uni-goods-row>
							</view>
						</view>
					</view>
					<!-- 店品展示 end -->
					<uni-load-more :status="loadingType"> </uni-load-more>
					<!-- 精选推荐 end -->
				</template>

				<!-- 第一套首页面模板 end -->

				<!-- 第二套首页模板 begin -->

				<template v-if="templateId === 'template1102'">
					<!-- 分类 -->
					<view v-if="!!activity.length" class="cate-section">
						<view class="wrap-title">
							<view class="wrap-title-en">CLASSIFCATION</view>
							<view class="wrap-title-cn">分类导航</view>
						</view>
						<view class="theme__panel df df-w jc-sb cate-section__list">
							<view
								v-for="(item, index) in activity"
								@click="navTo(item.pagePath)"
								:key="index"
								:style="{
									background: `${
										themeStyles.mainColor
									}12 url(${baseTemplateFileUri +
										item.imagePath ||
										''}) no-repeat center / 100% 100%`
								}"
								:class="(index === 0 && '.large') || ''"
								class="cate-item"
							>
								<!-- <image
									:src="baseTemplateFileUri + item.imagePath"
								></image> -->
								<view class="cate-item__name-en">{{
									item.enName
								}}</view>
								<view class="cate-item__name-cn">{{
									item.name
								}}</view>
								<view class="cate-item-icon">
									<uni-icon
										:bgColor="themeStyles.auxiliaryColor"
										:color="themeStyles.mainColor"
										bdRadius="100%"
										name="right-full"
										size="26rpx"
									></uni-icon>
								</view>
							</view>
						</view>
					</view>

					<!-- 直播跳转 -->
					<view 
						v-if="liveListData.length"
						class="live-wrap2">
						<view class="wrap-title zz-mb40">
							<view class="wrap-title-en">LIVE PLAZA</view>
							<view class="wrap-title-cn">直播广场</view>
							<view class="right-arrow" @click.stop="loginNavTo('/pages/common/pages/live/live')">
								<image class="zz-img-fit" :src="`${baseCommonFileUri}image/live-icon-arrow.png`"></image>
							</view>
						</view>
						<view 
							class="live-list">
							<uni-live-col 
								pathResource="0"
								:itemInfo="liveListData[0]"></uni-live-col>
						</view>
					</view>
					<!-- 热卖商品 begin -->
					<view v-if="hotGoodsList.length" class="goods-wrap">
						<view class="wrap-title">
							<view class="wrap-title-en">HOT SALE</view>
							<view class="wrap-title-cn">热卖爆款</view>
						</view>
						<view class="goods-list">
							<uni-goods-list-col-large :goodsList="hotGoodsList">
							</uni-goods-list-col-large>
						</view>
					</view>
					<!-- 热卖商品 end -->

					<!-- 精选推荐 begin -->
					<view class="goods-wrap">
						<view class="wrap-title">
							<view class="wrap-title-en">FEATURED RECOMMENDED</view>
							<view class="wrap-title-cn">精品推荐</view>
						</view>
						<view class="goods-list">
							<uni-goods-list-col-big :goodsList="goodsList">
							</uni-goods-list-col-big>
						</view>
					</view>

					<!-- 店品展示 begin -->
					<view 
						class="goods-wrap">
						<view class="wrap-title zz-mb40">
							<view class="wrap-title-en">STORE PRODUCT DISPLAY</view>
							<view class="wrap-title-cn">店品展示</view>
						</view>
						<view class="store-pro-list">
							<view class="store-pro-list_item"
								v-for="(item,index) in hotGoodsList"
								:key="index">
								<uni-goods-row
									:justShow="true"
									width="100%"
									goodsImageHeight="220rpx"
									:justShowFlag="true"
									:goods="item"
									:routeLink="
										`/pages/common/pages/goods/goodsDetail?goodsId=${item.goodsId}`
									"
									:goodsPrice="item.priceStr.split('.')"
									:priceColor="themeStyles.mainColor"
									:latePrice="item.activity !== 0 && item.priceOut">
										

									</uni-goods-row>
							</view>
						</view>
					</view>
					<!-- 店品展示 end -->
					<uni-load-more :status="loadingType"> </uni-load-more>
					<!-- 精选推荐 end -->
				</template>
				
				<!-- 第二套首页模板 end -->
			</view>
		</template>

		<uni-tabbar
			@onClick="switchTabbar"
			:animationData="animationData"
			:badgeBg="themeStyles.lightMainColor"
			:tintColor="themeStyles.mainColor"
		>
		</uni-tabbar>
		<!-- 授权弹层 -->
		<authorize 
			:visible="showAuthorizePop"
			title="请设置授权"
			content="暂未授权获取位置信息，请点击进行授权。"
			@close="showAuthorizePop=false"></authorize>
	</view>
</template>

<script>
const app = getApp();

/** api start */
import { queryCarouseList } from "@/lib/api/shopServer/rotationImage";
import { queryGoodsList } from "@/lib/api/goodsServer/goods";
import {
  customerRoomList
} from "@/lib/api/shopServer/info";
/** api end */

/** components begin */
import customHeader from "@/components/customHeader";
import uniTabbar from "@/components/uniTabbar";
import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import trickTitle from "@/components/trickTitle/trickTitle";
import uniIcon from "@/components/uniIcon/uniIcon";
import uniGoodsList from "@/components/goods/uniGoodsList";
import uniGoodsListRow from "@/components/goods/uniGoodsListRow";
import uniGoodsListColBig from "@/components/goods/uniGoodsListColBig";
import uniGoodsListColLarge from "@/components/goods/uniGoodsListColLarge";
import uniGoodsRow from "@/components/goods/uniGoodsRow";
import uniLiveCol from "@/components/live/uniLiveCol";
import authorize from "@/components/authorize";
import topRightNotice from "@/components/topRightNotice";
/** components end */

/** mixins begin */
import goodsMixin from "@/mixins/goods/goods";
import tabbarMixin from "@/mixins/tabbar";
import walletMixin from "@/mixins/wallet";
import shopMixin from "@/mixins/shop";
import locationMixin from "@/mixins/location";
/** mixins end */

// 解析二维码
import { analyzeQr } from "@/lib/analyzeQr";
import { mapState } from "vuex";

/** 不做页面渲染 begin */
let currentPage = 1;
/** 不做页面渲染 end */

export default {
	mixins: [
		goodsMixin, 
		tabbarMixin, 
		walletMixin, 
		locationMixin,
		shopMixin
	],
	components: {
		customHeader,
		uniTabbar,
		uniGoodsList,
		uniLoadMore,
		uniIcon,
		trickTitle,
		uniGoodsListRow,
		uniGoodsListColBig,
		uniGoodsListColLarge,
		uniGoodsRow,
		authorize,
		topRightNotice,
		uniLiveCol
	},

	data() {
		return {
			/* 店品展示 */
			testStoreProList:[
				{
					goodsId:"88999"
				}
			],
			/* 直播列表 */
			liveListData:[],
			/*  */
			isScrolling:false, //页面滚动
			scrollInfoStyle:`200rpx`, //
			scrollContentStyle:`position:relative;z-index: 999;`, //样式调整
			customBarH: this.customBar,  //自定义导航栏的高度
			/*  */
			activity: [
				{
					pagePath:
						"/pages/activity/pages/activityList?activityType=30",
					imagePath: `image/index/activity_sale.png`,
					enName: "PROMOTION",
					name: "限时促销"
				},
				{
					pagePath:
						"/pages/activity/pages/activityList?activityType=10",
					imagePath: `image/index/activity_group.png`,
					enName: "GROUP BUY",
					name: "好友拼团"
				},
				{
					pagePath:
						"/pages/activity/pages/activityList?activityType=20",
					imagePath: `image/index/activity_bargain.png`,
					enName: "BARGAIN",
					name: "助力砍价"
				},

				// {
				//   pagePath: "/pages/common/pages/live/live",
				//   imagePath: `image/index/live_broacast.png`,
				//   name: "直播广场"
				// },
				{
					pagePath: "/pages/integral/pages/integralShop",
					//pagePath: "",
					imagePath: `image/index/integral_shop.png`,
					enName: "INTERGRAL MALL",
					name: "积分商城"
				},
				{
					pagePath: "/pages/activity/pages/coupon/couponCenter",
					imagePath: `image/index/activity_ticket.png`,
					enName: "COUPON",
					name: "领券中心"
				}
			],
			titleNViewBackground: "",
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [],
			hotGoodsList: []
		};
	},

	computed: {
		...mapState("shop", ["shopInfo", "shopDetailInfo"]),
		...mapState("login", ["userInfo","hasGetLocation"])  //用户信息
	},

	async onLoad(option) {
		console.log(this.baseCommonFileUri);
		//console.log(this.shopInfo);
		//console.log(this.userInfo);
		currentPage = 1;
		try {
			await analyzeQr(option);
		} catch (error) {
			console.log("error", error);
		}

		this.setPageTitle();

		this.getCarouselList();
		await this.getHotGoodsList();
		this.getGoodsListAll({ currentPage });
	},

	async onShow() {
		try {
			//  获取店铺详情信息   
			await this._queryDetails({
				showLoading:false,
				id:this.baseShopId
			});
			// 获取余额信息
			await this._getWallet();
			// 获取位置经纬度 + 获取与店铺距离
			await this._LocationAndDistance();
			// 获取直播间数据
			await this.customerRoomList();
		} catch (error) {
			console.log(error);
			if(error.getShopDetail){
				this.$api.showToast("获取店铺详情信息失败");
			}
			this.$api.showToast(error.resultInfo||"请求出错");
		}
	},

	//下拉刷新
	async onPullDownRefresh() {
		try {
			//Object.assign(this.$data, this.$options.data());
			currentPage = 1;
			this.getCarouselList();
			await this.getHotGoodsList();
			this.getGoodsListAll({ 
				currentPage,
				showLoading:false
			 });
			//获取位置经纬度 + 获取与店铺距离
			await this._LocationAndDistance();
			// 获取直播间数据
			await this.customerRoomList();
		} catch (error) {
			this.$api.showToast(error.resultInfo||"请求出错");
		}
	},

	// 上拉加载
	onReachBottom() {
		if (this.loadingType === "more") {
			currentPage++;
			console.log("currentPage", currentPage);
			this.getGoodsListAll({ currentPage });
		}
	},

	onShareAppMessage(res) {
		return {
			title: `${this.shopInfo.shopName || ""}`,
			path: "/pages/tabbar/index"
		};
	},

	methods: {
		//获取直播间数据
		async customerRoomList(){
			try {
				//
				const { data } = await customerRoomList({
					showLoading:false,
					appId: this.accountInfo.appId,   // appid
					shopId: this.baseShopId   // 商铺id
				},{
					isLiveList:true  // 测试直播间列表数据
				});
				//
				console.log("---liveListData---",data);
				//
				this.liveListData = data.list.length && [data.list.shift()];
			} catch (error) {
				return Promise.reject(error);
			}
		},
		/* 页面滚动... */
		onPageScroll(e){
			//console.log(e);
			let {
				scrollTop
			} = e;
			if(this.isScrolling){
				return;
			}
			this.isScrolling = true;
			//获取SelectorQuery 对象实例
			const query = uni.createSelectorQuery().in(this);
			//判断滚动距离和容器
			query.select("#content-wrap").boundingClientRect(data=>{
				//console.log(data);
				let {
					top
				} = data;
				//
				if(scrollTop>=10){
					this.scrollInfoStyle = `auto`;
					this.scrollContentStyle = ``;
				}else{
					this.scrollInfoStyle = `200rpx`;
					this.scrollContentStyle = `position:relative;z-index: 999;`;
				}
				this.isScrolling = false;
			}).exec();
		},
		//跳转至余额付款二维码界面
		openBalanceQrcode(){
			app.globalData.fromIndexQrcodeToBalance = true;
			//
			this.loginNavTo("/pages/user/pages/wallet/balance");
		},
		//
		setPageTitle() {
			let pageTitle = "";

			if (this.shopInfo.shopName) {
				pageTitle = this.shopInfo.shopName;
				uni.setNavigationBarTitle({
					title: pageTitle
				});
			} else {
				app.globalData.getShopInfoCallBack = shopInfo => {
					if (Object.keys(shopInfo).length) {
						pageTitle = shopInfo.shopName;
						uni.setNavigationBarTitle({
							title: pageTitle
						});
					}
				};
			}
		},

		//   轮播图跳转
		carouselRoute(carousel) {
			if (!carousel.pagePath) return;
			let params = carousel.params || "";
			if (carousel.pathParams) {
				params = params
					? `?${carousel.pathParams}&${params}`
					: `?${carousel.pathParams}`;
			} else {
				params = params && `?${carousel.params || ""}`;
			}

			const routeLink = carousel.pagePath + params;
			if (carousel.pageType == 1) {
				this.navTo(routeLink);
			} else {
				this.switchTo(routeLink);
			}
		},

		//   获取轮播图
		async getCarouselList() {
			try {
				const res = await queryCarouseList({showLoading:false});
				this.carouselList = res.data.list;
			} catch (error) {
				console.log("error", error);
			}
			this.loaded = true;
		},
		//   跳转至产品分类页
		searchGoods(e) {
			// const value = e.detail.value;
			app.globalData.searchValue = true;
			uni.switchTab({
				url: `/pages/tabbar/category`
			});
		},

		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},

		// 获取热卖商品
		async getHotGoodsList() {
			try {
				const propsData = {
					showLoading:false,
					pageSize: 999,
					hot: 10,
					status: 10
				};

				const { data } = await queryGoodsList(propsData);
				console.log(data);
				this.hotGoodsList = data.list;
			} catch (error) {
				console.log("error", error);
			}
		}
	}
};
</script>

<style lang="scss">
@import "@/pages/tabbar/styles/index.scss";
</style>
